<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
<script type="text/javascript">
// const ul = document.querySelector("ul");
// ul.addEventListener('click', function (e) {
//     const target = e.target;
// 　　if (target.tagName.toLowerCase() === "li") {
// 　　　　const liList = this.querySelectorAll("li");
// 　　　　index = Array.prototype.indexOf.call(liList, target);
// 　　　　alert(`内容为${target.innerHTML}, 索引为${index}`);
// 　　}
// })

const liList = document.getElementsByTagName("li");

for(let i = 0; i<liList.length; i++){
    liList[i].addEventListener('click', function(e){
        alert(`内容为${e.target.innerHTML}, 索引为${i}`);
　　 })
}
</script>
  <style>
    #ul {
        background-color: gray;
        width: 700px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    li {
        margin-bottom: 20px;
        width: 80%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: lightgoldenrodyellow;
        font-size: 20px;
        font-weight: bold;
    }
  </style>
</html>
